<template>
  <div class="chat-container">
    <!-- 左侧侧边栏 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <el-button size="large" type="success" :icon="Plus" @click="createNewChat">新建聊天</el-button>
      </div>
      <h3 class="history-title">历史会话</h3>
      <ul class="chat-history">
        <li v-for="(chat, index) in chatHistory" :key="index">
          {{ chat.title }}
        </li>
      </ul>
    </div>

    <!-- 右侧主内容区 -->
    <div class="main-content">
      <div class="message-container">
        <!-- 消息展示区 -->
      </div>
      <div class="input-area">
        <input 
          type="text"
          v-model="newMessage"
          placeholder="输入消息..."
          @keyup.enter="sendMessage"
        />
        <button @click="sendMessage">发送</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'
</script>

<script>
export default {
  data() {
    return {
      chatHistory: [],
      newMessage: '',
    };
  },
  methods: {
    createNewChat() {
      this.chatHistory.push({
        title: 'New Chat ' + new Date().toLocaleTimeString(),
      });
    },
    sendMessage() {
      if (this.newMessage.trim()) {
        // 消息处理逻辑
        this.newMessage = '';
      }
    },
  },
};
</script>

<style scoped>
.chat-container {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 250px;
  background: #f5f5f5;
  border-right: 1px solid #ddd;
  transition: width 0.3s;
  padding: 20px;
  position: relative;
}

.sidebar.collapsed {
  width: 0;
  padding: 0;
  overflow: hidden;
}

.sidebar-header {
  height: 116px;
    padding-top: 15px;
    border: 1px solid #e0e0e6;
    border-left: unset;
    border-top: unset;
}

.new-chat-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
  padding: 10px 20px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.new-chat-btn:hover {
  background: #3aa876;
}

.plus-icon {
  font-size: 18px;
}

.toggle-collapse {
  cursor: pointer;
  padding: 8px;
}

.main-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.message-container {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px;
}

.input-area {
  display: flex;
  padding: 20px;
  gap: 10px;
}

.input-area input {
  flex-grow: 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.input-area button {
  padding: 12px 24px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>